import React, {Component} from 'react';
import {message, Tag} from 'antd';
import {connect} from 'dva';
import {formatMessage} from 'umi-plugin-react/locale';
import groupBy from 'lodash/groupBy';
import moment from 'moment';
import NoticeIcon from '../NoticeIcon';
import styles from './index.less';
import router from 'umi/router';

class GlobalHeaderRight extends Component {

    state = {
        notificationData: [],
    }

    componentDidMount() {
        const {dispatch} = this.props;

        // if (dispatch) {
        //     dispatch({
        //         type: 'global/fetchNotices',
        //     });
        // }
        this.findNaticePageData();
    }

    findNaticePageData = () => {
        const thisCtx = this;
        const {dispatch} = this.props;
        dispatch({
            type: 'notificationModel/unReadMsgList',
            callback: function (data) {
                if (data && data.success) {
                    thisCtx.buildData(data.datas.list, thisCtx);
                }
            }
        });
    }

    buildData = (dataList, thisCtx) => {
        let notificationData = [];
        if (dataList) {
            dataList.map((item) => {
                notificationData.push({
                    id: item.id,
                    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
                    title: item.content,
                    datetime: item.sendTime,
                    read: false,
                    type: 'notification',
                });
            });
            thisCtx.setState({
                notificationData
            });
        }
    }

    changeReadState = clickedItem => {
        const {id} = clickedItem;
        const thisCtx = this;
        const {dispatch} = this.props;
        if (dispatch) {
            dispatch({
                type: 'notificationModel/readedMsg',
                payload: {id},
                callback: function (data) {
                    if (data && data.success) {
                        thisCtx.findNaticePageData();
                    } else {
                        message.error('消息状态修改失败');
                    }
                }
            });
        }
    };
    handleNoticeClear = (title, key) => {
        const {dispatch} = this.props;

        this.setState({
            notificationData: []
        })

        message.success(
            `${formatMessage({
                id: 'component.noticeIcon.cleared',
            })} ${title}`,
        );


        // if (dispatch) {
        //     dispatch({
        //         type: 'global/clearNotices',
        //         payload: key,
        //     });
        // }
    };
    getNoticeData = () => {
        const {notices = []} = this.props;

        if (notices.length === 0) {
            return {};
        }

        const newNotices = notices.map(notice => {
            const newNotice = {...notice};

            if (newNotice.datetime) {
                newNotice.datetime = moment(notice.datetime).fromNow();
            }

            if (newNotice.id) {
                newNotice.key = newNotice.id;
            }

            if (newNotice.extra && newNotice.status) {
                const color = {
                    todo: '',
                    processing: 'blue',
                    urgent: 'red',
                    doing: 'gold',
                }[newNotice.status];
                newNotice.extra = (
                    <Tag
                        color={color}
                        style={{
                            marginRight: 0,
                        }}
                    >
                        {newNotice.extra}
                    </Tag>
                );
            }

            return newNotice;
        });
        return groupBy(newNotices, 'type');
    };
    getUnreadData = noticeData => {
        const unreadMsg = {};
        Object.keys(noticeData).forEach(key => {
            const value = noticeData[key];

            if (!unreadMsg[key]) {
                unreadMsg[key] = 0;
            }

            if (Array.isArray(value)) {
                unreadMsg[key] = value.filter(item => !item.read).length;
            }
        });
        return unreadMsg;
    };

    render() {
        const {currentUser, fetchingNotices, onNoticeVisibleChange} = this.props;
        const noticeData = this.getNoticeData();
        const unreadMsg = this.getUnreadData(noticeData);

        const {notificationData} = this.state;

        return (
            <NoticeIcon
                className={styles.action}
                count={notificationData.length}
                onItemClick={item => {
                    this.changeReadState(item);
                }}
                loading={fetchingNotices}
                clearText={formatMessage({
                    id: 'component.noticeIcon.clear',
                })}
                viewMoreText={formatMessage({
                    id: 'component.noticeIcon.view-more',
                })}
                onClear={this.handleNoticeClear}
                onPopupVisibleChange={onNoticeVisibleChange}
                onViewMore={() => router.push('/settings/notification')}
                clearClose
            >
                <NoticeIcon.Tab
                    tabKey="notification"
                    count={notificationData.length}
                    list={notificationData}
                    title={formatMessage({
                        id: 'component.globalHeader.notification',
                    })}
                    emptyText={formatMessage({
                        id: 'component.globalHeader.notification.empty',
                    })}
                    showViewMore
                />
                {/*<NoticeIcon.Tab
          tabKey="message"
          count={unreadMsg.message}
          list={noticeData.message}
          title={formatMessage({
            id: 'component.globalHeader.message',
          })}
          emptyText={formatMessage({
            id: 'component.globalHeader.message.empty',
          })}
          showViewMore
        />*/}
                {/*<NoticeIcon.Tab
          tabKey="event"
          title={formatMessage({
            id: 'component.globalHeader.event',
          })}
          emptyText={formatMessage({
            id: 'component.globalHeader.event.empty',
          })}
          count={unreadMsg.event}
          list={noticeData.event}
          showViewMore
        />*/}
            </NoticeIcon>
        );
    }
}

export default connect(({user, global, loading}) => ({
    currentUser: user.currentUser,
    collapsed: global.collapsed,
    fetchingMoreNotices: loading.effects['global/fetchMoreNotices'],
    fetchingNotices: loading.effects['global/fetchNotices'],
    notices: global.notices,
}))(GlobalHeaderRight);
